<template>
    <header class="header">
        <!-- 登录弹窗 -->
        <LoginModal v-model:visible="loginVisible" />

        <!-- 顶部信息栏 -->
        <div class="top-bar">
            <div class="container">
                <div class="contact-info">
                    <a href="mailto:2115925441@yict.edu.cn">
                        <svg-icon name="common/email" />
                        2115925441@yict.edu.cn
                    </a>
                    <a href="tel:+0377-8888-8888">
                        <svg-icon name="common/phone" />
                        +0377 8888 8888
                    </a>
                </div>
                <div class="social-links">
                    <a href="#" v-for="icon in socialIcons" :key="icon">
                        <svg-icon :name="`social-${icon}`" />
                    </a>
                </div>
            </div>
        </div>

        <!-- 主导航栏 -->
        <nav class="main-nav">
            <div class="container">
                <Logo />
                <div class="nav-links">
                    <div class="nav-item">
                        <router-link 
                            to="/" 
                            :class="{ active: currentRoute === '/' }"
                        >
                            首页
                        </router-link>
                    </div>
                    <div class="nav-item">
                        <router-link 
                            to="/house"
                            :class="{ active: isRouteActive('house') }"
                        >
                            房产
                        </router-link>
                        <div class="dropdown-menu">
                            <router-link to="/house/hot" class="dropdown-item">热门房产</router-link>
                            <router-link to="/house/new" class="dropdown-item">最新房产</router-link>
                            <router-link to="/house/map" class="dropdown-item">地图找房</router-link>
                        </div>
                    </div>
                    <div class="nav-item">
                        <router-link 
                            to="/agent"
                            :class="{ active: isRouteActive('agent') }"
                        >
                            经纪人
                        </router-link>
                    </div>
                    <div class="nav-item">
                        <router-link to="/owner">我是业主</router-link>
                        <div class="dropdown-menu">
                            <router-link to="/owner/sell" class="dropdown-item">房产出售</router-link>
                            <router-link to="/owner/valuation" class="dropdown-item">房产估价</router-link>
                        </div>
                    </div>
                    <div class="nav-item">
                        <router-link to="/about">关于我们</router-link>
                        <div class="dropdown-menu">
                            <router-link to="/about/contact" class="dropdown-item">联系我们</router-link>
                            <router-link to="/about/join" class="dropdown-item">加入我们</router-link>
                        </div>
                    </div>
                    <div class="divider"></div>
                    <div class="auth-area">
                        <!-- 未登录状态 -->
                        <template v-if="!userStore.userInfo">
                            <button class="login-btn" @click="showLogin">登录</button>
                        </template>
                        <!-- 已登录状态 -->
                        <template v-else>
                            <div class="user-info">
                                <span class="username">{{ userStore.userInfo.nickname || userStore.userInfo.username }}</span>
                                <div class="dropdown-menu nav-dropdown">
                                    <router-link to="/user/profile" class="dropdown-item">
                                        <svg-icon name="user" />
                                        <span>个人中心</span>
                                    </router-link>
                                    <router-link to="/chat" class="dropdown-item">
                                        <svg-icon name="message" />
                                        <div class="menu-item-with-badge">
                                            <span>消息中心</span>
                                            <el-badge 
                                                v-if="chatStore.totalUnreadCount" 
                                                :value="chatStore.totalUnreadCount" 
                                                :max="99"
                                                class="badge"
                                            />
                                        </div>
                                    </router-link>
                                    <router-link to="/user/favorite" class="dropdown-item">
                                        <svg-icon name="star" />
                                        <span>我的收藏</span>
                                    </router-link>
                                    <router-link to="/owner/sell" class="dropdown-item">
                                        <svg-icon name="publish" />
                                        <span>发布房源</span>
                                    </router-link>
                                    <a class="dropdown-item" @click="handleLogout">
                                        <svg-icon name="logout" />
                                        <span>退出登录</span>
                                    </a>
                                </div>
                            </div>
                        </template>
                    </div>
                </div>
            </div>
        </nav>
    </header>
</template>

<script setup>
import { ref, computed } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { useUserStore } from '@/stores/user'
import { useLoginStore } from '@/stores/login'
import { useChatStore } from '@/stores/chat'
import Logo from '@/components/common/Logo.vue'
import LoginModal from '@/views/login/index.vue'

// 定义社交媒体图标
const socialIcons = [
    'facebook',
    'twitter',
    'instagram',
    'linkedin'
]

const userStore = useUserStore()
const loginStore = useLoginStore()
const chatStore = useChatStore()
const loginVisible = ref(false)

const route = useRoute()
const currentRoute = computed(() => route.path)

// 判断当前路由是否属于某个导航项
const isRouteActive = (routeName) => {
    return currentRoute.value.startsWith(`/${routeName}`)
}

const showLogin = () => {
    loginVisible.value = true
}

const handleLogout = async () => {
    try {
        await userStore.logout()
        // 确保导航到首页
        router.push('/')
    } catch (error) {
        console.error('退出登录失败:', error)
    }
}
</script>

<style lang="scss" scoped>
.header {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    width: 1920px;
    margin: 0 auto;
}

.container {
    width: 1920px;
    margin: 0 auto;
    padding: 0 60px;
    box-sizing: border-box;
}

.top-bar {
    background: transparent;
    padding: 12px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    
    .container {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .contact-info {
        display: flex;
        gap: 30px;
        
        a {
            display: flex;
            align-items: center;
            gap: 8px;
            color: #fff;
            text-decoration: none;
            font-size: 14px;
            
            .svg-icon {
                font-size: 16px;
            }
        }
    }

    .social-links {
        display: flex;
        gap: 20px;
        
        a {
            color: #fff;
            opacity: 0.8;
            transition: opacity 0.3s;
            
            &:hover {
                opacity: 1;
            }
        }
    }
}

.main-nav {
    background: transparent;
    padding: 20px 0;
    
    .container {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .nav-links {
        display: flex;
        align-items: center;
        gap: 64px;
        
        .nav-item {
            position: relative;
            display: flex;
            align-items: center;

            a {
                position: relative;
                color: #fff;
                text-decoration: none;
                font-size: 16px;
                padding: 4px 0;
                transition: color 0.3s;
                
                &::after {
                    content: '';
                    position: absolute;
                    bottom: -4px;
                    left: 50%;
                    transform: translateX(-50%);
                    width: 0;
                    height: 2px;
                    background: #fff;
                    transition: width 0.3s ease;
                }
                
                &:hover::after,
                &.active::after {
                    width: 20px;
                }
                
                &:hover {
                    opacity: 0.8;
                }
            }

            // 下拉菜单的透明区域
            &::after {
                content: '';
                position: absolute;
                top: 100%;
                left: 50%;
                transform: translateX(-50%);
                width: 140px;
                height: 20px;
                background: transparent;
            }

            &:hover {
                .dropdown-menu {
                    opacity: 1;
                    visibility: visible;
                    transform: translateX(-50%) translateY(8px);
                    pointer-events: auto;
                }
            }

            .dropdown-menu {
                position: absolute;
                top: calc(100% + 12px);
                left: 50%;
                transform: translateX(-50%) translateY(20px);
                min-width: 140px;
                background: #fff;
                border-radius: 4px;
                padding: 8px 0;
                opacity: 0;
                visibility: hidden;
                transition: all 0.25s cubic-bezier(0.3, 0, 0.2, 1);
                box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
                z-index: 1000;
                pointer-events: none;

                &::after {
                    content: '';
                    position: absolute;
                    top: -20px;
                    left: 0;
                    width: 100%;
                    height: 20px;
                    background: transparent;
                }

                &::before {
                    content: '';
                    position: absolute;
                    top: -6px;
                    left: 50%;
                    transform: translateX(-50%);
                    border-left: 8px solid transparent;
                    border-right: 8px solid transparent;
                    border-bottom: 8px solid #fff;
                    z-index: 1;
                }

                .dropdown-item {
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    gap: 8px;
                    padding: 8px 16px;
                    color: #333;
                    text-decoration: none;
                    transition: all 0.2s cubic-bezier(0.3, 0, 0.2, 1);
                    white-space: nowrap;
                    font-size: 14px;
                    text-align: center;
                    
                    &::after {
                        display: none !important;
                    }
                    
                    &:hover {
                        background: rgba(74, 96, 161, 0.1);
                        color: #4A60A1;
                        padding-left: 24px;
                    }
                }
            }
        }

        .divider {
            width: 1px;
            height: 24px;
            background: rgba(255, 255, 255, 0.3);
            margin: 0 -32px;
        }
    }

    .login-btn {
        width: 100px;
        padding: 8px 24px;
        border: 1px solid rgba(255, 255, 255, 0.3);
        border-radius: 4px;
        background: transparent;
        color: #fff;
        cursor: pointer;
        transition: all 0.3s;
        
        &:hover {
            border-color: rgba(255, 255, 255, 0.5);
            background: rgba(255, 255, 255, 0.1);
        }
    }
}

.user-profile {
    position: relative;

    .avatar-wrapper {
        cursor: pointer;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        overflow: hidden;
        background: rgba(255, 255, 255, 0.1);
        transition: all 0.3s;

        &:hover {
            background: rgba(255, 255, 255, 0.2);
        }

        .avatar {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .avatar-placeholder {
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #fff;
            font-size: 18px;
        }
    }

    .dropdown-menu {
        width: 240px;

        .user-info {
            padding: 16px;
            text-align: center;

            .nickname {
                display: block;
                font-size: 16px;
                font-weight: 500;
                color: #333;
                margin-bottom: 4px;
            }

            .email {
                font-size: 14px;
                color: #666;
            }
        }

        .dropdown-divider {
            height: 1px;
            background: #eee;
            margin: 8px 0;
        }

        .dropdown-item {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 12px 16px;

            .svg-icon {
                width: 16px;
                height: 16px;
                color: #666;
            }

            &:hover {
                .svg-icon {
                    color: #4A60A1;
                }
            }
        }
    }
}

.user-info {
    position: relative;
    width: 100px;
    text-align: center;
    
    &::after {
        content: '';
        position: absolute;
        top: 100%;
        left: 50%;
        transform: translateX(-50%);
        width: 140px;
        height: 20px;
        background: transparent;
    }
    
    .username {
        color: #fff;
        font-weight: 500;
        cursor: pointer;
        padding: 4px 0;
        
        &:hover + .nav-dropdown {
            opacity: 1;
            visibility: visible;
            transform: translateX(-50%) translateY(8px);
            pointer-events: auto;
        }
    }
    
    .nav-dropdown {
        position: absolute;
        top: calc(100% + 20px);
        left: 50%;
        transform: translateX(-50%) translateY(20px);
        min-width: 140px;
        background: #fff;
        border-radius: 4px;
        padding: 8px 0;
        opacity: 0;
        visibility: hidden;
        transition: all 0.25s cubic-bezier(0.3, 0, 0.2, 1);
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
        z-index: 1000;
        pointer-events: none;

        &::after {
            content: '';
            position: absolute;
            top: -20px;
            left: 0;
            width: 100%;
            height: 20px;
            background: transparent;
        }

        &::before {
            content: '';
            position: absolute;
            top: -6px;
            left: 50%;
            transform: translateX(-50%);
            border-left: 8px solid transparent;
            border-right: 8px solid transparent;
            border-bottom: 8px solid #fff;
            z-index: 1;
        }

        &:hover {
            opacity: 1;
            visibility: visible;
            transform: translateX(-50%) translateY(8px);
            pointer-events: auto;
        }

        .dropdown-item {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 8px 16px;
            color: #333;
            text-decoration: none;
            transition: all 0.2s cubic-bezier(0.3, 0, 0.2, 1);
            white-space: nowrap;
            font-size: 14px;
            
            &:hover {
                background: rgba(74, 96, 161, 0.1);
                color: #4A60A1;
                padding-left: 24px;
            }
            
            .svg-icon {
                width: 16px;
                height: 16px;
                color: #666;
                transition: color 0.3s;
            }
            
            &:hover .svg-icon {
                color: #4A60A1;
            }
        }
    }

    &:hover {
        .nav-dropdown {
            opacity: 1;
            visibility: visible;
            transform: translateX(-50%) translateY(8px);
            pointer-events: auto;
        }
    }
}

.auth-area {
    width: 120px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.menu-item-with-badge {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex: 1;
    
    .badge {
        transform: scale(0.8);
    }
}

.dropdown-item {
    &:hover {
        .badge {
            ::v-deep(.el-badge__content) {
                background-color: #4A60A1;
            }
        }
    }
}
</style>